<template>
  <div class="padding">
    <p style="font-size: 18px;" class="text-bold">插入随机数据</p>
    <div class="margin-bottom">
      插入数量: <el-input-number v-model="randomData.size" size="small"/>
      <el-button type="primary" size="small" class="margin-left" @click="startRandomData">开始生成</el-button>
    </div>
    <el-table
      :data="tableMeta.columns"
      border
      stripe
      style="width: 100%"
      height="500"
      size="mini"
    >
      <el-table-column
        type="index"
        width="50"
      />
      <el-table-column
        prop="columnName"
        label="列名"
        width="200"
      />
      <el-table-column
        label="必填"
        width="50"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.nullable ? 'N':'Y' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="类型"
        width="170"
      >
        <template slot-scope="scope">
          <span>{{ showTableColumnType(scope.row) }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="remark"-->
<!--        label="注释"-->
<!--      />-->
      <el-table-column
        label="插值方法"
        fixed="right"
      >
        <template slot="header" slot-scope="scope">
          <span>插值方法 </span>
          <el-popover
            placement="top-start"
            title="插值方法解释"
            width="500"
            trigger="hover">
            你可以使用不同类型的数据来插入值, 只要标识好前缀即可
            <ul>
              <li><b>fixed:</b> 固定值前缀</li>
              <li><b>sql:</b> 有些时候,需要关联其它表的数据,这里写数据表的查询 sql , 当然, 我只会取第一列的数据</li>
              <li><b>random:</b> 随机值前缀, 这可能需要你了解本系统中的随机值生成工具和 spel 的书写, 这里给出了一些示例,大多数情况下, 这些已经足够了
                <ol>
                  <li v-for="randomMethod in randomMethods">{{randomMethod.value}}</li>
                </ol>
              </li>

            </ul>
            <el-button type="text" slot="reference" icon="el-icon-question"></el-button>
          </el-popover>
        </template>
        <template slot-scope="{row}">
          <el-input
            ref="dynamicInput"
            placeholder="输入插入方法"
            v-model="randomData.columnMappers[row.columnName]"
            size="small"
          />
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import database from '@/api/database'

export default {
  name: 'TableRandomData',
  props: {
    connName: String,
    tableMeta: Object
  },
  data(){
    return {
      randomMethods: [],
      loading: false,
      randomData: {
        size: 100,
        columnMappers: {

        }
      }
    }
  },
  methods: {
    init(){
      this.randomData.columnMappers = {};
    },
    showTableColumnType(row) {
      let columnSize = '(' + row.columnSize + ')'
      if (row.decimalDigits) {
        columnSize = '(' + row.columnSize + ',' + row.decimalDigits + ')'
      }
      return row.typeName + columnSize
    },
    startRandomData(){
      // 检测数据, 并组装提交数据
      let commitColumns = [];
      for (let columnName in this.randomData.columnMappers){
        let columnMapper = this.randomData.columnMappers[columnName];
        if (!columnMapper){
          continue
        }
        if (!columnMapper.startsWith('sql:') && !columnMapper.startsWith('random:') && !columnMapper.startsWith('fixed:')){
          this.$message('列 '+ columnName+' 插值方式错误,请确认')
          return ;
        }

        let randomMethod = columnMapper.split(':')
        let randomItem = {columnName};
        randomItem[randomMethod[0]] = randomMethod[1];
        commitColumns.push(randomItem)
      }

      // 开始生成
      database.tableRandomData(this.connName,this.tableMeta.table.actualTableName,commitColumns,this.randomData.size).then(res => {
        this.$message('生成成功')
      })
    }
  },
  mounted() {
    database.loadRandomMethods().then(res => {
      this.randomMethods = res.data;
    })
  },
  created() {
  },
}
</script>


